<template>
<div class="container">
	<div class="affirm-top">
		<div class="title">
			<div class="title-l" v-text="info.productName"></div>
			<div class="title-r">产品编号:{{info.productNo}}</div>
		</div>
		<div class="descibe flex">
			<div class="pic">
				<img :src="info.logoUrl" :onerror="defaultImg" alt="">
			</div>
			<div class="text flex-1" v-text="info.summary"></div>
		</div>
	</div>

	<!-- 签约方式 -->
	<div class="sign-w">
		<!-- 第一版 -->
		<div class="title">请选择签约方式</div>
		<div class="sign-way"
			:class="{active: (chargeWay==1 || !proportionFee)}" 
			v-if="fixedFeeList.length>0"
			>
			<div class="sign-l" @click="tapChargeWay(1)">
				<span>固定收费</span>
			</div>
			<div class="sign-r" @click="showFixChargeDialog=true">
				<span id="price" v-text="fixedFee.fixPriceUnitStr"></span>
			</div>
		</div>
		<div class="sign-way no-arrow" 
			v-if="proportionFee"
			:class="{active: (chargeWay==2||fixedFeeList.length==0)}"
			>
			<div class="sign-l" @click="tapChargeWay(2)">
				<span>比例收费</span>
			</div>
			<div class="sign-r">
				<span>{{proportionFee.proportionRealAmount}}‰</span>
			</div>
		</div>
	</div>

	<div class="charge-tip">服务佣金率不含交易佣金率，服务佣金收费=服务佣金率*账户（普通+信用）交易量</div>
	
		<!-- 第二版 -->
	<div class="sign-w2">
		<div class="title">签约方式</div>
		<div class="li-bar">
			<div class="bar-l">免费体验10天后转固定收费</div>
			<div class="bar-r">3980年/月</div>
		</div>
	</div>

	<!-- 专属顾问 -->
	<div class="private-consultant">
		<div class="consultant-wrap" v-if="info.hasAdviser">
			<div class="consultant-l">
				<span>专属投顾</span>
			</div>
			<div class="consultant-r">
				<a @click="tapSelect()" v-text="adviser.adviserName ? adviser.adviserName:'选择'"></a>
			</div>
		</div>

		<div class="consultant-wrap">
			<div class="consultant-l">
				<span>推荐人</span>
			</div>
			<div class="consultant-r no-arrow">
				<!-- span里面放返回的名字 -->
				<span v-text="recommender.name"></span>
				<input type="text" placeholder="请输入手机号码" maxlength="11" @input="getRecommendName()" v-model="recommender.tel">
			</div>
		</div>

	</div>


		<!-- 接收方式 -->
	<div class="receive-way" v-if="info.byMobile || info.byEmail">
		<div class="receive-wrap">
			<div class="receive-l">
				<span>接收方式</span>
			</div>
			<div class="receive-r">
				<!-- <span>修改</span> -->
			</div>
		</div>
		<div class="receive-wrap" v-if="info.byMobile">
			<div class="receive-l">
				<span>手机短信</span>
			</div>
			<div class="receive-r">
				<!-- <span id="tel"></span> -->
				<input type="text" id="tel" placeholder="请输入手机" maxlength="11" v-model="info.mobile">

			</div>
		</div>
		<div class="receive-wrap" v-if="info.byEmail">
			<div class="receive-l">
				<span>邮箱</span>
			</div>
			<div class="receive-r">
				<!-- <span id="mail">343408754@qq.com</span> -->
				<input type="text" id="mail" placeholder="请输入邮箱" :value="info.email">
			</div>
		</div>
	</div>

	<!-- 错误提示框 -->
	<div class="alert-box" v-text="alertInfo.text" v-show="alertInfo.isAlert"></div>

	<div class="footer">
		<!-- 协议 -->
		<div class="deal">
			<i class="deal-icon"></i>我同意并签署<a href="javascript:;">《产品协议书》</a>和<a href="javascript:;">《风险提示书》</a>
		</div>
		<a class="confirmSign" href="javascript:;" @click="hold()">提交</a>
	</div>

	<!-- 固定收费弹窗 -->
	<div class="charge-dialog-mask" v-show="showFixChargeDialog">
		<div class="charge-dialog">
			<h3>固定收费</h3>
			<div class="list-wrap">
			<div class="charge-list" 
				v-for="(item,index) in fixedFeeList" 
				:key="item.fixPriceId" 
				v-text="item.fixPriceUnitStr"
				v-bind:class="{active: item.isActive}"
				@click="selectFixPrice(index)"
				></div>
			<!-- <div class="charge-list active" data-priceId = "2">
				2000元/半年
			</div>
			<div class="charge-list" data-priceId = "3">
				1200元/季度 
			</div>
			<div class="charge-list" data-priceId = "3">
				1200元/季度 
			</div>
			<div class="charge-list" data-priceId = "3">
				1200元/季度 
			</div> -->
			</div>
			
			<div class="close-btn" @click="showFixChargeDialog=false">
				<img src="../assets/images/dialog_close.png" alt="">
			</div>
		</div>
	</div>

</div>
</template>

<script>
import Api from '@/service'
import Stores from '@/stores'
import Tip from '@/tools';
export default {
  name: 'AffirmOrder',
  data () {
    return {
    	productId: this.$route.query.productId,
    	showFixChargeDialog: false,
    	info: [],
    	fixedFeeList: [],
    	proportionFee: {},
    	fixedFee: {},
    	chargeWay: 0,		//固定收费1  比例收费2
    	recommender: {
    		name: '',
    		tel: ''
    	},
    	adviser: {
    		adviserId: '',
    		adviserName: ''
    	},
    	alertInfo: {
    		text: '',
    		isAlert: false
    	},
    	affirmOrderCache: {
    		tel: '',
    		email: '',
    		recommenderName: '',
    		recommenderTel: ''
    	},
    	defaultImg: Tip.tips.res.defaultImg
    }
  },
  methods: {
  	initAffirmOrder(){
  		let _self = this;

		console.log(Stores.state.riskInfo);
		Api.sm.initAffirmOrder(_self.productId)
		.then(function(response){
			console.log(response.data.info);
			if(response.data.status == "success" && response.data.code==200){
				_self.fixedFeeList =response.data.info.fixedFeeList;
				_self.proportionFee =response.data.info.proportionFee;
				_self.info = response.data.info;
				_self.fixedFee = response.data.info.fixedFeeList[0];

				for(let i=0; i<_self.fixedFeeList.length; i++){
					_self.fixedFeeList[i].isActive=false;
				}
	        }else if(response.data.status == "success" && response.data.code!=200){
	          _self.recommender.name='无';
	        }
	        else if(response.data.status == "failure"){
	          // 统一刷新
	        }




		});
		// 如果选择了投顾
		if(_self.$route.query.adviserId){
			_self.adviser.adviserId = _self.$route.query.adviserId;
			_self.adviser.adviserName = _self.$route.query.adviserName;

			// _self.getInfo();
		}
		// 设置收费方式 
		if(_self.fixedFeeList.length==0 && _self.proportionFee){
			_self.chargeWay = 2;
		}else{
			_self.chargeWay = 1;
		}
  	},
  	// 选择价格
  	selectFixPrice(_ind){
  		for(let i=0; i<this.fixedFeeList.length; i++){
  			this.fixedFeeList[i].isActive=false;
  		}

  		let _tempItem = this.fixedFeeList[_ind];

  		_tempItem.isActive = true;
  		this.fixedFee = _tempItem;
  		this.showFixChargeDialog = false;
  		// this.fixedFeeList = Object.assign({},this.fixedFeeList);
  		this.fixedFeeList.splice(_ind,1,_tempItem);
  	},
  	// 选择固定还是按比例收费
  	tapChargeWay(num){
  		if(num ==1){
  			this.chargeWay =1;
  		}else{
  			this.chargeWay =2;
  		}
  	},
  	getRecommendName(){
  		let _self = this;

  		if(_self.recommender.tel.length==11){
  			Api.sm.getAdvirseName(_self.recommender.tel)
			.then(function(response){
				console.log(response.data);
				if(response.data.status == "success" && response.data.code==200){
		          _self.recommender.name= response.data.info.recommedName;
		        }else if(response.data.status == "success" && response.data.code!=200){
		          _self.recommender.name='无';
		        }

			});
  		}
  	},
  	tapSelect(){
  		// this.cacheInfo();
  		this.$router.push({path:'/Select',query: {productId: this.productId}});
  	},
  	alert(_txt){
  		let _self = this;
		this.alertInfo.isAlert=true;
		this.alertInfo.text = _txt;
		setTimeout(function(){
			_self.alertInfo.isAlert=false;
		},1500);
  	},
  	cacheInfo(){
  		this.affirmOrderCache.tel = this.info.mobile;
  		this.affirmOrderCache.email = this.info.email;
  		this.affirmOrderCache.recommenderName = this.info.name;
  		this.affirmOrderCache.recommenderTel = this.info.tel;

  		let str = JSON.stringify(this.affirmOrderCache); 
  		// sessionStorage.obj = str;
  		sessionStorage.setItem('objStr', str)
  	},
  	getInfo(){
  		let str = sessionStorage.getItem('objStr');
  		this.affirmOrderCache = JSON.parse(str);
  		if(this.affirmOrderCache){
	  		this.info.mobile = this.affirmOrderCache.tel;
	  		this.info.email = this.affirmOrderCache.email;
	  		this.info.name = this.affirmOrderCache.recommenderName;
	  		this.info.tel = this.affirmOrderCache.recommenderTel;
  		}
  	},

  	hold(){
  		// 判断是否可以提交
  		if(this.adviser.adviserName ==''){
  			this.alert('请选择您的投顾!');
  			return false;
  		}
  		if(this.info.byMobile && this.info.mobile==''){
  			this.alert('手机号不能为空!');
  			return false;
  		}

  		// 提交数据
  		let _holdData = {
  			productId: this.productId,
  			productName: Stores.state.riskInfo.productName,
  			adviserId: this.adviser.adviserId,
  			adviserName: this.adviser.adviserName,
  			priceId: "",
  			priceType: this.chargeWay,
  			realAmount: "",
  			rzrqPrice: "",
  			rzrqTradingPrice: "",
  			priceString: "",
  			rmdName: this.recommender.name,
  			rmdPhone: this.recommender.tel,
  			rmdBranchCode: "",
  			activeMobile: "",
  			email: this.info.email,
  			mobile: this.info.mobile,
  			salePipeLine: "",
  			receiptId: Stores.state.riskInfo.receiptId
  		};
  		let _self = this;
  		console.log(_holdData);

  		Api.sm.holdData(_holdData).then(function(response){
  			console.log(response.data.status)
  			if(response.data.status=="success"){
  				console.log("提交数据成功")
  				_self.$router.push({path:'/Success',query:{productId:_self.productId}});
  			}
  			else if(response.data.status=="error"){
  				let _msg = response.data.message;
  				_self.$router.push({path:'/Fail',query:{productId:_self.productId,msg:_msg}});
  			}
  		});
  		
  	}

  },
  created: function(){
  	this.initAffirmOrder();

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	box-sizing: border-box;
	padding-bottom: calculateRem(72px);
	// display: flex;
    // align-items: center;
    // justify-content: center;
	.affirm-top{
		box-sizing: border-box;
		border-bottom: 1px solid #dae3ea;
		padding: calculateRem(12px) calculateRem(16px);
		background: white;
		.title{
			width: 100%;
			height: calculateRem(36px);
			line-height: calculateRem(26px);
			box-sizing: border-box;
			border-bottom: 1px solid #F5F8FA;
			.title-l{
				width: 56%;
				height: calculateRem(26px);
				float: left;
				@include ell;
				font-size: calculateRem(17px);
				color: #000000;
			}
			.title-r{
				width: 40%;
				height: calculateRem(26px);
				float: right;
				font-size: calculateRem(14px);
				color: #4b4b4b;
				text-align: right;

			}
		}
		.descibe{
			width: 100%;
			height: auto;
			margin-top: calculateRem(10px);
			.pic{
				width: calculateRem(44px);
				height: calculateRem(44px);
				overflow: hidden;
				margin-right: calculateRem(10px);
				>img{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				font-size: calculateRem(14px);
				color: #4B4B4B;
				letter-spacing: 0;
				line-height: calculateRem(22px);
				max-height: calculateRem(44px);
				overflow: hidden;
				@include mulell(2);
			}
		}
	}
	.sign-w{
		width: 100%;
		height: auto;
		margin-top: calculateRem(10px);
		/*background: white;*/
		background: #F5F8FA;
		box-sizing: border-box;
		border-bottom: 1px solid #dae3ea;
		.title{
			width: 100%;
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			height: calculateRem(40px);
			line-height: calculateRem(40px);
			font-size: calculateRem(16px);
			color: #999;
		}
		.sign-way{
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			/*border-bottom: 1px solid #F5F8FA;*/
			background: white;
			position: relative;
			&:after{
				content: '';
				height: 1px;
				position: absolute;
				bottom: 0;
				left: calculateRem(16px);
				right: calculateRem(16px);
				background: #F5F8FA;
			}
			.sign-l{
				width: 50%;
				float: left;
				height: calculateRem(50px);
				>span{
					font-size: calculateRem(17px);
					color: #333333;
					&:before{
						content: '';
						display: inline-block;
						width: calculateRem(20px);
						height: calculateRem(20px);
						background: url('../assets/images/affirm_noselect_icon.png') no-repeat;
						background-size: 100%;
						margin-right: calculateRem(6px);
						vertical-align: middle;

					}
				}

			}
			.sign-r{
				width: 50%;
				float: right;
				height: calculateRem(50px);
				text-align: right;
				>span{
					font-size: calculateRem(16px);
					color: #E62622;
					&:after{
						content: '';
						display: inline-block;
						width: calculateRem(8px);
						height: calculateRem(16px);
						vertical-align: -2px;
						background: url('../assets/images/affirm_right_arrow_icon.png') no-repeat;
						background-size: 100% 100%;
						margin-left: calculateRem(6px);
					}
				}
			}

			
		}
		.no-arrow{
			.sign-r{
				>span{
					&:after{
						display: none;
					}
				}
			}
		}
		.active{
			.sign-l{
				>span{
					&:before{
						background: url('../assets/images/affirm_select_icon.png') no-repeat;
						background-size: 100%;
					}
				}
			}
		}

	}
	.charge-tip{
		width: 100%;
		height: auto;
		font-size: calculateRem(14px);
		color: #666;
		line-height: calculateRem(18px);
		box-sizing: border-box;
		padding: 0 calculateRem(16px);
		margin-top: calculateRem(5px);
	}
	.sign-w2{
		width: 100%;
		height: auto;
		margin-top: calculateRem(10px);
		box-sizing: border-box;
		border-bottom: 1px solid #dae3ea;
		.title{
			width: 100%;
			height: calculateRem(30px);
			line-height: calculateRem(30px);
			padding: 0 calculateRem(16px);
			font-size: calculateRem(16px);
			color: #4B4B4B;
		}
		.li-bar{
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			background: white;
			font-size: calculateRem(16px);
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			.bar-l{
				width: 70%;
				height: calculateRem(50px);
				float: left;
				color: #333;
				@include ell;
			}
			.bar-r{
				width: 30%;
				height: calculateRem(50px);
				float: right;
				text-align: right;
				color: #E62622;
				@include ell;
			}

		}
	}

	.private-consultant{
		width: 100%;
		height: auto;
		background: white;
		margin-top: calculateRem(12px);
		box-sizing: border-box;
		border-bottom: 1px solid #dae3ea;
		padding: 0 calculateRem(16px);
		.consultant-wrap{
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			box-sizing: border-box;
			border-bottom: 1px solid #F5F8FA;
			.consultant-l{
				width: 35%;
				height: calculateRem(50px);
				float: left;
				>span{
					font-size: calculateRem(17px);
					color: #333333;
					
				}
			}
			.consultant-r{
				width: 65%;
				height: calculateRem(50px);
				float: right;
				text-align: right;
				>span,>a{
					font-size: calculateRem(16px);
					color: #4B4B4B;
					&:after{
						content: '';
						display: inline-block;
						width: calculateRem(8px);
						height: calculateRem(16px);
						vertical-align: -2px;
						background: url('../assets/images/affirm_right_arrow_icon.png') no-repeat;
						background-size: 100% 100%;
						margin-left: calculateRem(6px);
					}
					
				}
				>input[type="text"]{
					width: calculateRem(122px);
					height: calculateRem(40px);
					text-align: right;
					font-size: calculateRem(17px);
					border: none;
					color: #4B4B4B;
					vertical-align: top;
					margin-top: 3px;
				}
				
			}

			.no-arrow{
				>span{
					display: inline-block;
					width: calculateRem(60px);
					height: calculateRem(40px);
					line-height: calculateRem(46px);
					@include ell;

					&:after{
						display: none;
					}
				}
			}

		}
	}

	.receive-way{
		width: 100%;
		height: auto;
		/*background: white;*/
		margin-top: calculateRem(12px);
		box-sizing: border-box;
		border-bottom: 1px solid #dae3ea;
		/*padding: 0 calculateRem(16px);*/
		.receive-wrap{
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			box-sizing: border-box;
			/*border-bottom: 1px solid #F5F8FA;*/
			background: white;
			padding: 0 calculateRem(16px);
			box-sizing: border-box;
			position: relative;
			&:after{
				content: '';
				height: 1px;
				position: absolute;
				bottom: 0;
				left: calculateRem(16px);
				right: calculateRem(16px);
				background: #F5F8FA;
			}
			.receive-l{
				width: 40%;
				height: calculateRem(50px);
				float: left;
				>span{
					font-size: calculateRem(16px);
					color: #333333;
				}
				
			}
			.receive-r{
				width: 60%;
				height: calculateRem(50px);
				line-height: calculateRem(50px);
				float: right;
				text-align: right;
				@include ell;
				>span{
					font-size: calculateRem(16px);
					color: #4B4B4B;
				}
				>input[type="text"]{
					width: 90%;
					height: calculateRem(40px);
					text-align: right;
					font-size: calculateRem(17px);
					border: 0;
					color: #4B4B4B;
					vertical-align: top;
					margin-top: 3px;
				}


			}

			&:first-child{
				height: calculateRem(30px);
				line-height: calculateRem(30px);
				background: #F5F8FA;
				.receive-l{
					height: calculateRem(30px);
					line-height: calculateRem(30px);
					>span{
						color: #999;
					}
				}
				.receive-r{
					height: calculateRem(30px);
					line-height: calculateRem(30px);
					>span{
						color: #4B4B4B;
						&:after{
							content: '';
							display: inline-block;
							width: calculateRem(8px);
							height: calculateRem(16px);
							vertical-align: -2px;
							background: url('../assets/images/affirm_right_arrow_icon.png') no-repeat;
							background-size: 100% 100%;
							margin-left: calculateRem(6px);
						}

					}
				}
			}
		}
		/*.title-reset{
			height: calculateRem(30px);
			line-height: calculateRem(30px);
			background: #F5F8FA;
		}*/
	}

	.footer{
		width: 100%;
		/*height: calculateRem(60px);*/
		height: auto;
		padding: 0 calculateRem(10px) calculateRem(8px);
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: #F5F8FA;
		.deal{
			width: 100%;
			height: auto;
			line-height:calculateRem(26px); 
			box-sizing: border-box;
			/*padding: 0 calculateRem(10px);*/
			font-size: calculateRem(14px);
			color: #666666;
			margin-bottom: 6px;
			text-align: center;
			display: none;
			>i{
				width: calculateRem(22px);
				height: calculateRem(22px);
				display: inline-block;
				background: url('../assets/images/deal_icon_noactive.png') no-repeat;
				background-size: 100% 100%;
				vertical-align: middle;

			}
			>a{
				font-size: calculateRem(14px);
				color: #E62622;

			}
		}
		.select{
			>i{
				background: url('../assets/images/deal_icon_active.png') no-repeat;
				background-size: 100% 100%;
			}
		}

		.confirmSign{
			display: block;
			width: 100%;
			height: calculateRem(50px);
			background: #E62622;
			border-radius: calculateRem(5px);
			color: white;
			font-size: calculateRem(20px);
			text-align: center;
			line-height: calculateRem(50px);
			&:active{
				background: #C51B0D;
			}

		}
	}

	.alert-box{
		position: fixed;
		z-index: 1000;
		max-width: 86%;
		width: auto;
		height: calculateRem(40px);
		font-size: calculateRem(16px);
		line-height: calculateRem(40px);
		transform: translate(-50%,0);
		left: 50%;
		padding: 0 calculateRem(8px);
		background: rgba(0,0,0,.7);
		top: 20vh;
		border-radius: 5px;
		box-sizing: border-box;
		color: white;
		text-align: center;
		/*word-break: normal;*/
		// display: none;
	}

	.charge-dialog-mask{
		position: fixed;
		background: rgba(0,15,25,.6);
		z-index: 200;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// display: none;
		.charge-dialog{
			position: absolute;
			bottom: calculateRem(10px);
			left: calculateRem(10px);
			right: calculateRem(10px);
			border-radius: calculateRem(13px);
			height: calculateRem(284px);
			background: #F3F5F8;
			box-sizing: border-box;
			/*padding: calculateRem(10px);*/
			>h3{
				margin: 0;
				height: calculateRem(80px);
				line-height: calculateRem(80px);
				text-align: center;
				font-size: calculateRem(20px);
				color: #14171A;
			}
			.list-wrap{
				width: 100%;
				max-height: calculateRem(183px);
				overflow-y: auto;
				background: white;
				.charge-list{
					box-sizing: border-box;
					width: 100%;
					height: calculateRem(61px);
					border-bottom: 1px solid #F3F5F8;
					line-height: calculateRem(60px);
					padding: 0 calculateRem(56px) 0 calculateRem(16px);
					font-size: calculateRem(18px);
					background: white;
					color: #000F19;
					position: relative;
					&:after{
						content: '';
						display: inline-block;
						background: url('../assets/images/affirm_noselect_icon.png') no-repeat;
						background-size: 100%;
						width: calculateRem(20px);
						height: calculateRem(20px);
						right: calculateRem(20px);
						position: absolute;
						top: calculateRem(20px);

					}
					&:active{
						background: #fafafa;
					}
				}
				.active{
					&:after{
						background: url('../assets/images/affirm_select_icon.png') no-repeat;
						background-size: 100%;
					}

				}
			}
			
			.close-btn{
				width: calculateRem(32px);
				height: calculateRem(32px);
				position: absolute;
				top: calculateRem(-47px);
				right: calculateRem(15px);
				border-radius: 50%;
				&:after{
					content: '';
					display: block;
					width: 2px;
					height: calculateRem(15px);
					background: rgba(255,255,255,.6);
					position: absolute;
					bottom: calculateRem(-15px);
					left: calculateRem(15px);
				}
				>img{
					width: 100%;
					height: 100%;
				}
			}
		}

	}
}
</style>